<template>
  <div>
    <!-- el-table: @selection-change="select" -->
    <el-table
      ref="table"
      v-loading="loading"
      :data="data"
      :height="'calc(100vh - ' + (253 + screenHeight) + 'px)'"
      stripe
      highlight-current-row
    >
      <el-table-column align="left" prop="title" label="标题" width="300">
        <template #default="scope">
          <div :title="scope.row.title">
            <div>{{ scope.row.title }}</div>
            <!-- scope.row.vid -->
            <el-tag
              v-if="scope.row.vid"
              style="border: none"
              type="danger"
              class="mr-2"
              size="small"
              >视频</el-tag
            >
            <el-tag
              v-if="scope.row.category_ids[0] != 5"
              style="border: none"
              size="small"
              :class="scope.row.category_ids[0] == 4 ? 'tagColor' : 'primary'"
              >{{ categoryMap[scope.row.category_ids[0]].label }}</el-tag
            >
            <el-tag
              style="border: none"
              v-if="scope.row.is_expires && scope.row.category_ids[0] != 5"
              type="info"
              size="small"
              class="ml-2"
              >已过期</el-tag
            >
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="match_info" label="赛事名" width="300">
        <template #default="scope">
          <div v-if="scope.row.match_info" class="Media Media--center Media--justifyCenter">
            <div>{{ JSON.parse(scope.row.match_info).competition_info.name }}</div>
          </div>
          <div v-else>{{ scope.row.match_nick }}</div>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="match_info" label="主客队" width="220">
        <template #default="scope">
          <div v-if="scope.row.match_info">
            <div class="Media Media--center Media--justifyCenter">
              <img
                style="width: 20px; margin: 0 4px"
                :src="JSON.parse(scope.row.match_info).home_team_info.logo"
              />
              <div>
                {{ JSON.parse(scope.row.match_info).home_team_info.team_name }}
              </div>
            </div>
            <!-- <p class="text-center">VS</p> -->
            <el-button class="text-center" type="primary" circle>VS</el-button>
            <div class="Media Media--center Media--justifyCenter">
              <img
                style="width: 20px; margin: 0 4px"
                :src="JSON.parse(scope.row.match_info).away_team_info.logo"
              />
              <div>
                {{ JSON.parse(scope.row.match_info).away_team_info.team_name }}
              </div>
            </div>
          </div>
          <div v-else>/</div>
        </template>
      </el-table-column>
      <el-table-column align="center" min-width="160" prop="price" label="价格">
        <template #default="scope">
          <span
            style="color: #ee2424; font-size: 16px; font-weight: 600"
            :style="
              scope.row.marketing_tools[5] && !scope.row.marketing_tools[5].status
                ? 'text-decoration: line-through'
                : ''
            "
            >{{
              scope.row.market_ids.includes(5)
                ? `&yen;${scope.row.marketing_tools[5].seckill_price}`
                : ''
            }}</span
          >
          &nbsp;
          <span
            :style="
              scope.row.market_ids.includes(5) && scope.row.marketing_tools[5].status
                ? 'text-decoration: line-through;'
                : ''
            "
          >
            {{ !scope.row.price ? '免费' : `&yen;${scope.row.price}` }}
          </span>
          <div v-if="scope.row.market_ids.includes(5)">
            <!-- <el-divider>
              秒杀
            </el-divider> -->
            <!-- <div
              style="color: #e45656"
              :style="!scope.row.marketing_tools[5].status ? 'text-decoration: line-through' : ''"
            >
              {{ `秒杀价：&yen;${scope.row.marketing_tools[5].seckill_price}` }}
            </div> -->
            <el-countdown
              v-if="scope.row.marketing_tools[5].status"
              value-style="font-size: 14px;background: rgb(228, 86, 86);padding: 4px;color: #fff;border-radius: 100px;"
              :value="new Date(scope.row.marketing_tools[5].seckill_expire).getTime()"
              format="秒杀 DD [天] HH:mm:ss"
              @change="onChange"
            />
            <el-tag
              v-if="scope.row.market_ids.includes(5) && !scope.row.marketing_tools[5].status"
              class="mt-3"
              type="danger"
              >秒杀结束</el-tag
            >
            <div class="Grid Grid--justifyCenter mt-3">
              <div
                class="mr-2"
                style="
                  background: #f7f7f7;
                  font-size: 12px;
                  line-height: 16px;
                  color: #999999;
                  padding: 0px 5px;
                  height: 34px;
                "
                v-if="scope.row.marketing_tools[5].status"
              >
                <div>{{ scope.row.marketing_tools[5].seckill_stock }}</div>
                <div>总数</div>
              </div>
              <div
                class="mr-2"
                style="
                  background: #f7f7f7;
                  font-size: 12px;
                  line-height: 16px;
                  color: #999999;
                  padding: 0px 5px;
                  height: 34px;
                "
                v-if="scope.row.marketing_tools[5].status"
              >
                <div>{{ scope.row.marketing_tools[5].surplus }}</div>
                <div>库存</div>
              </div>
              <div
                class="mr-2"
                v-if="scope.row.marketing_tools[5].status"
                style="
                  cursor: pointer;
                  text-decoration: underline;
                  color: #005266;
                  font-size: 12px;
                  line-height: 16px;
                  padding: 0px 5px;
                  height: 34px;
                  border: 1px solid #005266;
                  border-radius: 4px;
                "
                @click="getXnkc(scope.row)"
              >
                <div>{{ scope.row.marketing_tools[5].surplus_show }}</div>
                <div>虚拟</div>
              </div>
            </div>
          </div>
          <el-popover placement="right" :width="380" trigger="hover">
            <template #reference>
              <!-- v-if="scope.row.discount" -->
              <el-tag
                v-if="scope.row.discount"
                class="ml-3 mt-2"
                style="cursor: pointer;border: 1px solid rgb(0, 82, 102);"
              >
                查看折扣
              </el-tag>
              
            </template>
            <div
              v-for="(item, index) of scope.row.discount ? JSON.parse(scope.row.discount) : []"
              :key="index"
            >
              <el-table class="mb-4" :data="item">
                <el-table-column width="80" property="index" label="价格">
                  {{ index }}
                </el-table-column>
                <el-table-column property="name" label="用户信息">
                  <template #default="discountScope">
                    <div style="display: flex; justify-items: center">
                      <img
                        :src="discountScope.row.headimgurl"
                        style="
                          width: 44px;
                          height: 44px;
                          border-radius: 100px;
                          border: 1px solid #eee;
                        "
                        alt=""
                      />

                      <span class="ml-2" style="text-align: left">
                        <div>昵称：{{ discountScope.row.nickname }}</div>
                        <div>ID：{{ discountScope.row.member_id }}</div>
                      </span>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-popover>
        </template>
      </el-table-column>

      <el-table-column prop="vid_img" label="视频封面" show-overflow-tooltip>
        <template #default="scope">
          <div v-if="scope.row.vid_img" style="width: 70px; height: 70px; position: relative">
            <img
              style="
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
                width: 20px;
              "
              src="https://liaoma-test.oss-cn-shenzhen.aliyuncs.com/liaoma/admin/assets/images/sp_play.png"
              alt=""
            />
            <img
              style="width: 70px; height: 70px; object-fit: cover; border-radius: 6px"
              :src="scope.row.vid_img"
              @error="error"
              alt=""
            />
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="hits" label="浏览量" show-overflow-tooltip>
        <template #default="scope">
          <div
            @click="getHits(scope.row)"
            :style="
              scope.row.hits ? 'cursor: pointer;text-decoration: underline;color:#005266;' : ''
            "
          >
            {{ scope.row.hits }}
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="sale_num" label="销售量" show-overflow-tooltip>
        <template #default="scope">
          <div
            @click="getSales(scope.row)"
            :style="
              scope.row.sale_num ? 'cursor: pointer;text-decoration: underline;color:#005266;' : ''
            "
          >
            {{ `${scope.row.sale_num}` || '/' }}
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="convert_rate" label="转化率" show-overflow-tooltip />
      <!-- <el-table-column align="center" prop="discount" label="折扣" min-width="160">
        <template #default="scope">
          <div v-if="scope.row.discount" v-for="(item, index) of scope.row.discount?JSON.parse(scope.row.discount):[]" :key="index">
            <div class="Media">
              <div style="color: red">{{ `&yen;${index}` }}</div>
              <div class="Media-body text-left">
                <div>{{ `,含[${item[0].nickname}...] 共${item.length}人` }}</div>
              </div>
            </div>
          </div>
          <div v-else>/</div>
        </template>
      </el-table-column> -->
      <!-- <el-table-column prop="unique" label="是否退款" show-overflow-tooltip /> -->
      <el-table-column
        v-if="role_ids.includes(1) || role_ids.includes(3) || role_ids.includes(4)"
        label="销售信息"
        show-overflow-tooltip
        width="160"
      >
        <template #default="scope">
          <div>{{ scope.row.author.nickname ? '销售员：' + scope.row.author.nickname : '' }}</div>
          <div>{{ scope.row.author.dept_names ? '组别：' + scope.row.author.dept_names : '' }}</div>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="is_top" label="营销方案" width="140">
        <template #default="scope">
          <template v-if="scope.row.market_ids.length">
            <div v-for="(item, index) in scope.row.market_ids" :key="index">
              <!-- <el-button type="primary" size="small" plain>{{marketList[item-1]}}</el-button> -->
              <el-tag
                style="margin-bottom: 5px; border: none"
                size="small"
                effect="light"
                type="warning"
                >{{ marketList[item - 1] }}</el-tag
              >
            </div>
          </template>
          <div v-else>/</div>
        </template>
      </el-table-column>
      <!-- <el-table-column align="center" prop="wechat_info.title" label="公众号" /> -->
      <el-table-column align="center" label="操作" fixed="right" width="190">
        <template #default="scope">
          <div v-if="draftStatus < 2">
            <!-- <el-popconfirm
              v-if="draftStatus == 0"
              title="是否发起推送?"
              cancel-button-text="否"
              confirm-button-text="是"
              cancel-button-type="primary"
              confirm-button-type="text"
              @confirm="handleTask(scope.row)"
            >
              <template #reference>
                <el-button v-if="draftStatus == 0" class="operation-button" type="primary" size="small" :underline="false">
                  推送
                </el-button>
              </template>
            </el-popconfirm> -->
            <el-button
              v-if="draftStatus == 0"
              class="operation-button"
              type="primary"
              size="small"
              :underline="false"
              @click="handleTask(scope.row)"
            >
              推送
            </el-button>
            <el-button
              class="operation-button"
              v-if="draftStatus == 0"
              type="primary"
              size="small"
              :underline="false"
              @click="viewDetails(scope.row)"
            >
              预览
            </el-button>
            <el-button
              class="operation-button"
              type="primary"
              size="small"
              :underline="false"
              @click="
                () => {
                  $emit('handle-edit', scope.row)
                }
              "
            >
              修改
            </el-button>
            <el-button
              class="operation-button mt-2"
              v-if="draftStatus == 0"
              type="primary"
              size="small"
              plain
              :underline="false"
              @click="istop(scope.row)"
            >
              {{ scope.row.is_top ? '取消置顶' : '置顶' }}
            </el-button>
            <el-button
              class="operation-button mt-2"
              v-if="draftStatus == 0"
              type="primary"
              size="small"
              plain
              :underline="false"
              @click="
                () => {
                  $emit('handle-edit', scope.row, 'copy')
                }
              "
            >
              复制
            </el-button>
            <el-button
              class="operation-button mt-2"
              v-if="draftStatus == 0"
              type="primary"
              size="small"
              plain
              :underline="false"
              @click="getHqPoster(scope.row)"
            >
              海报
            </el-button>
            <el-button
              class="operation-button mt-2"
              v-if="draftStatus == 0"
              type="primary"
              size="small"
              link
              :underline="false"
              @click="updateDiscount(scope.row)"
            >
              折扣
            </el-button>
            <!-- <el-button
              type="primary"
              class="mr-1"
              :underline="false"
              @click="updateDiscount(scope.row)"
            >
              黑单包退
            </el-button> -->

            <el-popconfirm
              v-if="draftStatus == 0"
              :title="scope.row.is_disable ? '上架该方案?' : '下架该方案?'"
              cancel-button-text="否"
              confirm-button-text="是"
              cancel-button-type="primary"
              confirm-button-type="text"
              @confirm="disable(scope.row)"
            >
              <template #reference>
                <!-- <el-button type="primary" class="mr-1" :underline="false"> 还原 </el-button> -->
                <el-button
                  class="operation-button mt-2"
                  type="primary"
                  size="small"
                  link
                  :underline="false"
                >
                  {{ scope.row.is_disable ? '上架' : '下架' }}
                </el-button>
              </template>
            </el-popconfirm>
            <el-popconfirm
              title="删除该方案?"
              cancel-button-text="否"
              confirm-button-text="是"
              cancel-button-type="primary"
              confirm-button-type="text"
              @confirm="dele(scope.row)"
            >
              <template #reference>
                <el-button
                  class="operation-button mt-2"
                  type="primary"
                  size="small"
                  link
                  :underline="false"
                >
                  删除
                </el-button>
              </template>
            </el-popconfirm>
            <el-button
              class="operation-button mt-2"
              v-if="draftStatus == 0"
              type="primary"
              size="small"
              link
              :underline="false"
              @click="handleDetection()"
            >
              一键检测
            </el-button>
          </div>
          <div v-if="draftStatus == 2">
            <el-popconfirm
              title="还原该方案?"
              cancel-button-text="否"
              confirm-button-text="是"
              cancel-button-type="primary"
              confirm-button-type="text"
              @confirm="restoreArticle(scope.row)"
            >
              <template #reference>
                <!-- <el-button type="primary" class="mr-1" :underline="false"> 还原 </el-button> -->
                <el-button
                  class="operation-button"
                  type="primary"
                  size="small"
                  plain
                  :underline="false"
                >
                  还原
                </el-button>
              </template>
            </el-popconfirm>
          </div>
          <div v-if="draftStatus == 3">
            <el-button
              class="operation-button"
              type="primary"
              size="small"
              plain
              :underline="false"
              @click="
                () => {
                  $emit('handle-edit', scope.row, 'copy')
                }
              "
            >
              使用
            </el-button>
            <el-button
              class="operation-button"
              type="primary"
              size="small"
              plain
              :underline="false"
              @click="
                () => {
                  $emit('handle-edit', scope.row)
                }
              "
            >
              修改
            </el-button>
            <el-popconfirm
              title="删除该模板?"
              cancel-button-text="否"
              confirm-button-text="是"
              cancel-button-type="primary"
              confirm-button-type="text"
              @confirm="dele(scope.row)"
            >
              <template #reference>
                <el-button
                  class="operation-button"
                  type="primary"
                  size="small"
                  plain
                  :underline="false"
                >
                  删除
                </el-button>
              </template>
            </el-popconfirm>
          </div>
          <div v-if="draftStatus == 4">
            <el-button
              class="operation-button"
              type="primary"
              size="small"
              plain
              :underline="false"
              @click="getHqPoster(scope.row)"
            >
              海报
            </el-button>
            <el-popconfirm
              title="删除该模板?"
              cancel-button-text="否"
              confirm-button-text="是"
              cancel-button-type="primary"
              confirm-button-type="text"
              @confirm="dele(scope.row)"
            >
              <template #reference>
                <el-button
                  class="operation-button"
                  type="primary"
                  size="small"
                  plain
                  :underline="false"
                >
                  删除
                </el-button>
              </template>
            </el-popconfirm>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      v-model="xnkcDialogVisible"
      title="修改"
      width="360px"
      :before-close="handleClose"
      :close-on-click-modal="false"
    >
      <div style="text-align: center">
        <el-input v-model="surplus_show" type="number" style="width: 240px" placeholder="请输入" />
      </div>
      <template #footer>
        <el-button :loading="loading" @click="xnkcDialogVisible = false">取消</el-button>
        <el-button :loading="loading" type="primary" @click="xnkcConfirm">确定</el-button>
      </template>
    </el-dialog>
    <!-- 销量 -->
    <el-dialog
      title="销量"
      v-model="saleDialogVisible"
      width="860"
      :before-close="
        () => {
          saleDialogVisible = false
        }
      "
    >
      <el-row>
        <el-col class="mb-2">
          <el-input
            v-model="saleQuery.nick"
            class="ya-search-value mr-2"
            placeholder="请输入用户昵称"
            clearable
          />
          <el-input
            v-model="saleQuery.member_id"
            class="ya-search-value mr-2"
            placeholder="请输入用户ID"
            clearable
          />
          <el-button type="primary" @click="saleSearch()">查询</el-button>
          <el-button title="重置" @click="saleRefresh()">重置</el-button>
        </el-col>
      </el-row>
      <div class="elTable">
        <el-table :data="saleData" border style="width: 100%; min-height: 40vh">
          <!-- <el-table-column prop="member_id" label="会员id"></el-table-column> -->
          <el-table-column prop="name" label="用户信息" min-width="120">
            <template #default="scope">
              <div style="display: flex; justify-items: center">
                <!-- <img
                  :src="scope.row.headimgurl"
                  style="width: 44px; height: 44px; border-radius: 100px; border: 1px solid #eee"
                  alt=""
                /> -->
                <div style="position: relative; width: 44px; height: 44px">
                  <img
                    :src="scope.row.headimgurl"
                    style="width: 44px; height: 44px; border-radius: 100px; border: 1px solid #eee"
                    alt=""
                  />
                  <img
                    v-if="scope.row.is_subscribe"
                    style="position: absolute; right: 0; bottom: 0; width: 16px"
                    src="https://liaoma-test.oss-cn-shenzhen.aliyuncs.com/liaoma/admin/assets/images/wechart.png"
                    alt=""
                  />
                </div>
                <span class="ml-2" style="text-align: left">
                  <div>昵称：{{ scope.row.nickname }}</div>
                  <div>ID：{{ scope.row.member_id }}</div>
                </span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="pay_real" label="实收金额" />
          <el-table-column label="支付渠道" show-overflow-tooltip>
            <template #default="scope">
              {{ payList[scope.row.pay_type - 1].label }}
            </template>
          </el-table-column>
          <el-table-column label="营销方案" show-overflow-tooltip>
            <template #default="scope">
              <div v-for="(item, index) in scope.row.market_ids" :key="index">
                <el-tag style="margin-bottom: 5px; border: none" size="small">{{
                  marketList[item - 1]
                }}</el-tag>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="pay_time" label="支付时间">
            <template #default="scope">
              {{
                scope.row.pay_time ? scope.row.pay_time.substring(5, scope.row.pay_time.length) : ''
              }}
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div style="display: flex; justify-content: center; margin-top: 20px">
        <el-pagination
          @size-change="saleHandleSizeChange"
          @current-change="saleHandleCurrentChange"
          :current-page="saleQuery.page"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="saleQuery.limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="saleTotal"
        />
      </div>
    </el-dialog>
    <!-- 浏览量 -->
    <el-dialog
      title="浏览量"
      v-model="dialogVisible"
      width="780"
      :before-close="
        () => {
          dialogVisible = false
        }
      "
    >
      <el-table :data="viewsData" border style="width: 100%" @sort-change="memberSort">
        <el-table-column prop="name" label="昵称" min-width="120">
          <template #default="scope">
            <div style="display: flex; justify-items: center">
              <!-- <img
                :src="scope.row.headimgurl"
                style="width: 44px; height: 44px; border-radius: 100px; border: 1px solid #eee"
                alt=""
              /> -->
              <div style="position: relative; width: 44px; height: 44px">
                <img
                  :src="scope.row.headimgurl"
                  style="width: 44px; height: 44px; border-radius: 100px; border: 1px solid #eee"
                  alt=""
                />
                <img
                  v-if="scope.row.is_subscribe"
                  style="position: absolute; right: 0; bottom: 0; width: 16px"
                  src="https://liaoma-test.oss-cn-shenzhen.aliyuncs.com/liaoma/admin/assets/images/wechart.png"
                  alt=""
                />
              </div>
              <span class="ml-2" style="text-align: left">
                <div>昵称：{{ scope.row.nickname }}</div>
                <div>ID：{{ scope.row.member_id }}</div>
              </span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="最后访问时间" prop="update_time" sortable="custom">
          <template #default="scope">
            {{
              scope.row.update_time
                ? scope.row.update_time.substring(5, scope.row.update_time.length)
                : ''
            }}
          </template>
        </el-table-column>
        <el-table-column prop="views" label="访问次数" sortable="custom" />
        <el-table-column prop="pay_status" label="是否已购买" sortable="custom">
          <template #default="scope">
            {{ scope.row.pay_status ? '是' : '否' }}
          </template>
        </el-table-column>
      </el-table>
      <div style="display: flex; justify-content: center; margin-top: 20px">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="memberQuery.page"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="memberQuery.limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="viewsTotal"
        />
      </div>
    </el-dialog>
    <!-- 设置折扣 -->
    <el-dialog
      v-model="discountVisible"
      title="设置折扣"
      width="50%"
      :before-close="
        () => {
          discountVisible = false
        }
      "
    >
      <el-form ref="formEl" :model="form" label-width="120px">
        <el-row v-for="(item, index) in form.discountList" :key="index">
          <el-col :span="10">
            <el-form-item
              label="折后价"
              :rules="{
                required: true,
                validator: (rule, value, callback) => amount(rule, value, callback),
                trigger: 'blur'
              }"
              :prop="`discountList.${index}.price`"
            >
              <el-input v-model="item.price" />
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item
              label="关联用户"
              :rules="{
                required: true,
                message: '请选择用户',
                trigger: 'blur'
              }"
              :prop="`discountList.${index}.user_ids`"
            >
              <el-input
                readonly
                :modelValue="
                  item.user_ids.length
                    ? `含[${item.user_ids[0].nickname}...] 共${item.user_ids.length}人`
                    : '请选择用户'
                "
                @click="relation(index)"
              />
            </el-form-item>
          </el-col>
          <el-col :span="4" style="text-align: right">
            <el-button
              type="primary"
              @click="
                () => {
                  form.discountList.push({
                    price: '',
                    user_ids: []
                  })
                }
              "
              >添加</el-button
            >
            <!-- :disabled="form.discountList.length === 1" -->
            <el-button
              type="danger"
              @click="
                () => {
                  form.discountList.splice(index, 1)
                }
              "
              >移除</el-button
            >
          </el-col>
        </el-row>
      </el-form>
      <div style="text-align: center" v-if="!form.discountList.length">
        <el-button
          type="primary"
          @click="
            () => {
              form.discountList.push({
                price: '',
                user_ids: []
              })
            }
          "
          >添加</el-button
        >
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="discountVisible = false">取消</el-button>
          <el-button type="primary" @click="handleDiscount">确定</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 选择用户 -->
    <el-dialog
      v-model="userIdsVisible"
      title="选择用户"
      width="50%"
      draggable
      :close-on-click-modal="false"
      :before-close="
        () => {
          // 需要将this.multipleSelection初始化
          multipleSelection = []
          userIdsVisible = false
          $refs.multipleTableRef.clearSelection()
        }
      "
    >
      <el-row>
        <el-col class="mb-2">
          <el-select v-model="queryField" class="ya-date-field" placeholder="查询类型">
            <el-option value="member_id" label="会员ID" />
            <el-option value="nickname" label="昵称" />
          </el-select>
          <el-input
            v-model="search_value"
            class="ya-search-value mr-2"
            placeholder="请输入关键字"
            clearable
          />
          <el-button type="primary" @click="getUsers()">查询</el-button>
          <el-button
            title="重置"
            @click="
              () => {
                queryField = 'nickname'
                search_value = ''
                query = {
                  nickname: '',
                  member_id: '',
                  wechat_id: '',
                  status: 1,
                  page: 1,
                  limit: 10
                }
                query.wechat_id = colContent.member_id ? colContent.member_id : colContent.wechat_id
                getUsers()
              }
            "
          >
            <!-- <svg-icon icon-class="refresh" /> -->
            重置
          </el-button>
        </el-col>
      </el-row>
      <el-table
        ref="multipleTableRef"
        :data="fansData"
        :row-key="
          (row) => {
            return row.member_id
          }
        "
        style="width: 100%"
        @selection-change="
          (val) => {
            multipleSelection = val
            // form.discountList[selectFansIndex].user_ids = val
          }
        "
      >
        <el-table-column type="selection" width="55" :reserve-selection="true" />
        <el-table-column prop="member_id" label="会员ID" width="180" />
        <el-table-column prop="nickname" label="昵称" width="220">
          <template #default="scope">
            <el-avatar style="vertical-align: middle" size="20" :src="scope.row.headimgurl" />
            {{ scope.row.nickname }}
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态">
          <template #default="scope">
            <el-tag v-if="scope.row.status == 1" type="success">关注</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="create_time" label="注册时间" />
      </el-table>
      <!-- 分页 -->
      <pagination
        v-show="count > 0"
        v-model:total="count"
        v-model:page="query.page"
        v-model:limit="query.limit"
        @pagination="getUsers"
      />
      <template #footer>
        <span class="dialog-footer">
          <el-button
            @click="
              () => {
                // 需要将this.multipleSelection初始化
                multipleSelection = []
                $refs.multipleTableRef.clearSelection()
                userIdsVisible = false
              }
            "
            >取消</el-button
          >
          <el-button type="primary" @click="handleUserIds">确定</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 海报 -->
    <poster v-if="isPoster" :objItem="objItem" @getPoster="isPoster = false" />
    <!-- 查看方案详情 -->
    <el-drawer v-model="viewDrawer" :show-close="false" direction="rtl" size="30%">
      <template #header>
        <h4>方案详情预览</h4>
      </template>
      <template #default>
        <!-- <div class="mobile-width">
          <iframe frameborder="0" width="100%" height="735px" :src="`${locationOrigin}/user/#/pages/details/details/?appid=${colContent.wechat_info.app_id}&key=pc&content_id=${colContent.content_id}&currentIndex=${colContent.colContent}&token=${hasToken}`"></iframe>
        </div> -->
        <div style="border: 1px solid #999999; border-radius: 20px; overflow: hidden">
          <iframe
            frameborder="0"
            width="100%"
            :height="height"
            :src="`${locationOrigin}/user/#/pages/details/details/?key=pc&content_id=${colContent.content_id}&currentIndex=${colContent.colContent}&token=${hasToken}`"
          ></iframe>
        </div>
      </template>
      <template #footer>
        <div style="flex: auto">
          <el-button @click="viewDrawer = false">关闭</el-button>
        </div>
      </template>
    </el-drawer>
    <!-- 推送任务面板 -->
    <el-dialog
      v-model="taskVisible"
      title="专属独立推送服务已连接"
      width="25%"
      :before-close="
        () => {
          taskVisible = false
        }
      "
    >
      <div class="Grid Grid--center">
        <div
          class="text-sm truncate"
          style="padding: 5px 10px; width: 100%; color: #222222; text-align: center"
        >
          {{ colContent.title }}
        </div>
      </div>
      <div v-if="taskObject.length" style="background-color: #EBF6F9; border-radius: 10px">
        <div
          class="Grid Grid--center Grid--justifyCenter Grid--1of4 text-xs"
          style="
            color: #a0a0a0;
            padding: 10px 0;
            width: 100%;
            box-sizing: content-box;
            text-align: center;
          "
        >
          <div class="Grid-cell">序号</div>
          <div class="Grid-cell">拟推用户</div>
          <div class="Grid-cell">实推用户</div>
          <div class="Grid-cell">完成时间</div>
        </div>
        <div
          v-for="(item, index) in taskObject"
          :key="index"
          class="Grid Grid--center Grid--justifyCenter Grid--1of4 text-sm"
          style="
            color: #222222;
            padding: 10px 0;
            width: 100%;
            box-sizing: content-box;
            text-align: center;
          "
        >
          <div class="Grid-cell">{{ taskObject.length - index }}</div>
          <div class="Grid-cell">{{ item.status ? item.push_total : '/' }}</div>
          <div class="Grid-cell">{{ item.status ? item.push_successful : '/' }}</div>
          <div class="Grid-cell">{{ item.status ? item.push_time : '/' }}</div>
        </div>
      </div>
      <div class="Grid">
        <div
          class="text-center truncate"
          style="
            width: 100%;
            font-size: 18px;
            color: #005266;
            box-sizing: content-box;
            padding-top: 10px;
          "
        >
          {{ getPushStatus.msg }}
        </div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <!-- <el-button @click="taskVisible = false">取消</el-button> -->
          <el-button type="primary" :disabled="!getPushStatus.isStatus" @click="handleAddTask"
            >推送该方案</el-button
          >
        </span>
      </template>
    </el-dialog>
    <!-- 一键检测 -->
    <div
      v-if="isDetection"
      style="
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        width: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 998;
      "
    >
      <div
        class="detection-box"
        style="
          width: 277px;
          height: 380px;
          font-size: 16px;
          background: url(https://code-app.oss-cn-beijing.aliyuncs.com/other/777.png) no-repeat;
          background-position: center;
          background-size: cover;
          position: fixed;
          top: 20%;
          left: 50%;
          margin-left: -138px;
          z-index: 9;
        "
      >
        <el-icon
          color="#ffffff"
          size="18"
          @click="isDetection = false"
          style="position: absolute; top: 10px; right: 10px"
          ><Close
        /></el-icon>
        <div style="padding: 160px 40px 0">
          <div class="Grid Grid--center Grid--justifyCenter item">
            <div class="Grid-cell">确认推送情况</div>
            <div class="op">
              <img
                style="width: 18px; vertical-align: text-bottom; margin-right: 5px"
                src="https://code-app.oss-cn-beijing.aliyuncs.com/other/778.png"
                alt=""
              />
              <text>正常</text>
            </div>
          </div>
          <div class="Grid Grid--center item">
            <div class="Grid-cell">读取微信服务</div>
            <div class="op">
              <img
                style="width: 18px; vertical-align: text-bottom; margin-right: 5px"
                src="https://code-app.oss-cn-beijing.aliyuncs.com/other/778.png"
                alt=""
              />
              <text>正常</text>
            </div>
          </div>
          <div class="Grid Grid--center item">
            <div class="Grid-cell">检查模板消息</div>
            <div class="op">
              <img
                style="width: 18px; vertical-align: text-bottom; margin-right: 5px"
                src="https://code-app.oss-cn-beijing.aliyuncs.com/other/778.png"
                alt=""
              />
              <text>正常</text>
            </div>
          </div>
          <div class="Grid Grid--center item">
            <div class="Grid-cell">校验阅读数据</div>
            <div class="op">
              <img
                style="width: 18px; vertical-align: text-bottom; margin-right: 5px"
                src="https://code-app.oss-cn-beijing.aliyuncs.com/other/778.png"
                alt=""
              />
              <text>正常</text>
            </div>
          </div>
          <div class="item">
            <div
              class="op"
              style="font-size: 20px; text-align: center; font-weight: bold; padding: 4px 0px 10px"
            >
              服务正常!
            </div>
          </div>
        </div>
        <div class="Grid Grid--center Grid--justifyCenter" style="padding-top: 0">
          <div
            style="
              background-color: #005266;
              color: #ffffff;
              width: 120px;
              height: 38px;
              font-size: 14px;
              line-height: 38px;
              border-radius: 20px;
              text-align: center;
              cursor: pointer;
            "
            @click="isDetection = false"
          >
            知道了
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  dele,
  istop,
  disable,
  addTask,
  log,
  restoreArticle,
  setVirtualInventory
} from '@/api/content/content'
import { list } from '@/api/member/fans'
// import { memberList } from '@/api/member/log'
import { editdiscount, getTask } from '@/api/article/article'
import { list as saleList } from '@/api/order/order'
import screenHeight from '@/utils/screen-height'
import poster from './poster.vue'
import defaultSettings from '@/settings'
import { useSettingsStoreHook } from '@/store/modules/settings'
import dayjs from 'dayjs'
import { stubString } from 'lodash'
import { useUserStoreHook } from '@/store/modules/user'

const storePrefix = defaultSettings.storePrefix
const settingsStore = useSettingsStoreHook()
const tokenName = settingsStore.tokenName
const hasToken = localStorage.getItem(storePrefix + tokenName)

export default {
  name: 'List',
  components: {
    poster
  },
  props: {
    data: {
      type: Array,
      default: () => []
    },
    loading: {
      type: Boolean,
      default: false
    },
    draftStatus: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      taskVisible: false,
      isDetection: false,
      screenHeight: 0,
      marketList: ['留资优惠', '不中包退', '买一送一', '新人首免', '定时秒杀', '数据分析'], //营销方案
      hasToken,
      locationOrigin:
        import.meta.env.VITE_USER_NODE_ENV == 'prod'
          ? window.location.origin
          : 'http://xlm.feiyanfly.com',
      memberQuery: { page: 1, limit: 10, content_id: '' }, // 流量入参
      viewsTotal: 0, //流量总条数
      viewsData: [], //流量列表数据
      memberItem: [], //点击方案列表某条数据的item
      saleQuery: { page: 1, limit: 10, content_id: '', status: 1, nick: '', member_id: '' }, // 销量入参
      saleTotal: 0, //销量总条数
      saleData: [], //销量列表数据
      isPoster: false, //海报
      dialogVisible: false, //流量
      saleDialogVisible: false, //销量
      discountVisible: false, //折扣弹窗
      xnkcDialogVisible: false, //虚拟库存弹窗
      surplus_show: 0, //库存
      objItem: {}, //当前item
      height: 680,
      categoryMap: {
        3: {
          label: '足球',
          color: '#00b42a'
        },
        4: {
          label: '篮球',
          color: '#ffbf29'
        }
      },
      form: {
        discountList: [
          {
            price: '',
            user_ids: []
          }
        ]
      },
      // 支付类型
      payList: [
        {
          value: '1',
          label: '微信'
        },
        {
          value: '2',
          label: '支付宝'
        },
        {
          value: '3',
          label: '余额'
        },
        {
          value: '4',
          label: '微信(第三方)'
        },
        {
          value: '5',
          label: '支付宝(第三方)'
        }
      ], //支付方式
      // 选择粉丝
      userIdsVisible: false,
      // 粉丝列表
      fansData: [],
      // 当前操作选择粉丝索引
      selectFansIndex: 0,
      queryField: 'nickname',
      search_value: '',
      query: {
        nickname: '',
        member_id: '',
        wechat_id: '',
        status: 1,
        page: 1,
        limit: 10,
        not_in: []
      },
      multipleSelection: [],
      count: 0,
      surplusItem: {},
      // 当前操作对象
      colContent: {},
      viewDrawer: false,
      role_ids: [],
      taskObject: {}
    }
  },
  computed: {
    getPushStatus() {
      let num = this.taskObject.length
      let _isStatus = true
      if (num) {
        if (!this.taskObject[num - 1].push_time) {
          _isStatus = false
          // console.log(dayjs().unix() * 1000)
        } else {
          this.taskObject.forEach((item) => {
            if (!item.status) {
              _isStatus = false
            }
          })
          // 当前时间是否 > push_time + 10s ?
          // console.log(dayjs(this.taskObject.task_list[num - 1].push_time).add(10, 'second').format('YYYY-MM-DD HH:mm:ss').valueOf())
          // if (dayjs().unix() * 1000 > dayjs('2025-01-23 02:49:21').add(10, 'second').valueOf()) {
          //   _isStatus = true
          // }
        }
      }
      return {
        msg: !num ? `暂未发起推送` : `第${num}次推送${!_isStatus ? '进行中' : '已完成'}`,
        isStatus: _isStatus
      }
    }
  },
  created() {
    console.log(this.data, 'data', Date.now() + 1000 * 60 * 60 * 7)
    const userStore = useUserStoreHook()
    this.role_ids = userStore.user.role_ids
  },
  destroyed() {
    window.removeEventListener('resize', this.handleResize)
  },
  mounted() {
    this.screenHeight = screenHeight()
    this.$nextTick(() => {
      this.screenHeight = document.getElementsByClassName('elRow')[0].clientHeight
    })
  },
  methods: {
    handleDetection() {
      return ElMessage.warning('服务升级中...')
      this.isDetection = true
      setTimeout(() => {
        let times = {
          0: (Math.floor(Math.random() * (5000 - 1000 + 1) + 1000) / 1000).toFixed(1) * 1,
          1: (Math.floor(Math.random() * (5000 - 1000 + 1) + 1000) / 1000).toFixed(1) * 1,
          2: (Math.floor(Math.random() * (5000 - 1000 + 1) + 1000) / 1000).toFixed(1) * 1,
          3: (Math.floor(Math.random() * (5000 - 1000 + 1) + 1000) / 1000).toFixed(1) * 1,
          4: 1
        }
        const divs = document.querySelectorAll('.detection-box .item')
        const ops = document.querySelectorAll('.detection-box .item .op')
        // let _s = ((Math.floor(Math.random() * (3000 - 1000 + 1) + 1000))/1000).toFixed(1) * 1
        let _s = 0
        divs.forEach((div, index) => {
          _s += times[index]
          console.log(_s)
          div.style.animationDelay = `${_s}s`
        })
        let _o = 0
        ops.forEach((div, index) => {
          _o += times[index]
          div.style.animationDelay = `${_o}s`
        })
      }, 0)
    },
    // 获取高度
    handleResize() {
      const that = this
      that.screenHeight = document.getElementsByClassName('elRow')[0].clientHeight
      window.onresize = () => {
        return (() => {
          that.screenHeight = document.getElementsByClassName('elRow')[0].clientHeight //实时高度
        })()
      }
    },
    // 销量重置
    saleRefresh() {
      this.saleQuery = { page: 1, limit: 10, content_id: '', status: 1, nick: '', member_id: '' }
      this.getSales(this.memberItem)
    },
    // 虚拟库存弹窗
    getXnkc(item) {
      this.xnkcDialogVisible = true
      this.surplusItem = item
      this.surplus_show = item.marketing_tools[5].surplus_show
    },
    // 虚拟库存修改
    xnkcConfirm() {
      if (this.surplus_show == 0) {
        ElMessage.error('虚拟库存不能小于1')
        return
      }
      // surplusItem
      setVirtualInventory({
        content_id: this.surplusItem.content_id,
        surplus_show: this.surplus_show
      }).then((res) => {
        if (res.code == 200) {
          this.xnkcDialogVisible = false
          ElMessage.success('修改成功')
          this.$emit('handleComplete')
        } else {
          ElMessage.error(res.msg)
        }
      })
    },
    // 流量弹窗
    getHits(item) {
      this.memberItem = item
      this.memberQuery.content_id = item.content_id
      if (!item.hits) return
      this.dialogVisible = true
      log(this.memberQuery).then((res) => {
        if (res.code == 200) {
          this.viewsData = res.data.list
          this.viewsTotal = res.data.count
        }
      })
    },
    // 排序
    memberSort(sort) {
      this.memberQuery.sort_field = sort.prop
      if (sort.prop == 'update_time' || sort.prop == 'pay_status' || sort.prop == 'views') {
        if (sort.order === 'ascending') {
          this.memberQuery.sort_value = 'desc'
          this.getHits(this.memberItem)
        }
        if (sort.order === 'descending') {
          this.memberQuery.sort_value = 'asc'
          this.getHits(this.memberItem)
        }
      }
    },
    // 销量搜索
    saleSearch() {
      this.saleQuery.page = 1
      this.getSales(this.memberItem)
    },
    // 销量弹窗
    getSales(item) {
      this.memberItem = item
      this.saleQuery.content_id = item.content_id
      if (!item.sale_num) return
      this.saleDialogVisible = true
      saleList(this.saleQuery).then((res) => {
        if (res.code == 200) {
          this.saleData = res.data.list
          this.saleTotal = res.data.count
        }
      })
    },
    // 流量每页条数
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.memberQuery.page = 1
      this.memberQuery.limit = val
      this.getHits(this.memberItem)
    },
    // 流量每页
    handleCurrentChange(val) {
      this.memberQuery.page = val
      console.log(`当前页: ${val}`)
      this.getHits(this.memberItem)
    },
    // 销量每页条数
    saleHandleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.saleQuery.page = 1
      this.saleQuery.limit = val
      this.getSales(this.memberItem)
    },
    // 销量每页
    saleHandleCurrentChange(val) {
      this.saleQuery.page = val
      console.log(`当前页: ${val}`)
      this.getSales(this.memberItem)
    },
    amount(rule, value, callback) {
      if (value === '') return callback(new Error('输入金额有误!'))
      if (/^[1-9]\d*(,\d{3})*(\.\d{1,2})?$|^0\.\d{1,2}$/.test(value) || value == 0) {
        callback()
      } else {
        callback(new Error('输入金额有误!'))
      }
    },
    // 指定折扣
    updateDiscount(e) {
      this.colContent = e
      // 初始化数据
      let map = this.colContent.discount ? JSON.parse(this.colContent.discount) : { '': [] }
      let arr = []
      Object.keys(map).forEach((key) => {
        arr.push({ price: key, user_ids: map[key] })
        console.log(`Key: ${key}, Value: ${map[key]}`)
      })
      this.form.discountList = arr
      this.discountVisible = true
    },
    // 海报弹窗
    getPoster() {
      this.isPoster = true
    },
    // 获取海报推广
    getHqPoster(item) {
      this.isPoster = true
      console.log(item, 'item')
      this.objItem = item
    },
    // 删除
    dele(e) {
      dele({
        ids: e.content_id
      })
        .then((res) => {
          this.$emit('handleComplete')
          ElMessage.success(res.msg)
        })
        .catch(() => {})
    },
    // 还原
    restoreArticle(e) {
      restoreArticle({
        content_id: e.content_id
      })
        .then((res) => {
          this.$emit('handleComplete')
          ElMessage.success(res.msg)
        })
        .catch(() => {})
    },
    // 置顶
    istop(e) {
      istop({
        ids: [e.content_id],
        is_top: !e.is_top
      })
        .then((res) => {
          this.$emit('handleComplete')
          ElMessage.success(res.msg)
        })
        .catch(() => {
          this.$emit('handleComplete')
        })
    },
    // 禁用
    disable(e) {
      disable({
        ids: [e.content_id],
        is_disable: !e.is_disable
      })
        .then((res) => {
          this.$emit('handleComplete')
          ElMessage.success(res.msg)
        })
        .catch(() => {
          this.$emit('handleComplete')
        })
    },
    // 完成折扣设置
    handleDiscount() {
      this.$refs.formEl.validate((valid, fields) => {
        if (valid) {
          let map = {}
          this.form.discountList.forEach((item) => {
            map[item.price] = item.user_ids
          })
          console.log(map, 'map')
          // 设置
          editdiscount({
            content_id: this.colContent.content_id,
            discount: JSON.stringify(map)
          })
            .then((res) => {
              if (res.code === 200) {
                ElMessage.success(res.msg)
                this.$emit('handleComplete')
                this.discountVisible = false
              }
            })
            .catch(() => {})
        } else {
          console.log('error submit!', fields)
        }
      })
    },
    // 粉丝列表确认用户
    handleUserIds() {
      this.form.discountList[this.selectFansIndex].user_ids = this.multipleSelection
      // 需要将this.multipleSelection初始化
      this.multipleSelection = []
      this.$refs.multipleTableRef.clearSelection()
      this.userIdsVisible = false
    },
    toggleSelection() {
      let arr = []
      this.form.discountList[this.selectFansIndex].user_ids.forEach((row) => {
        arr.push(row.member_id)
      })
      this.fansData.forEach((row) => {
        if (arr.includes(row.member_id)) this.$refs.multipleTableRef.toggleRowSelection(row, true)
      })
    },
    getUsers() {
      this.fansData = []
      // 拼查询条件
      if (this.search_value) {
        this.query[this.queryField] = this.search_value
      } else {
        this.query[this.queryField] = ''
      }
      // 将已选的用户id带入查询接口，做排除处理
      let arr = []
      this.form.discountList.forEach((item, index) => {
        // 排除当前this.selectFansIndex的列
        if (this.selectFansIndex !== index) {
          item.user_ids.forEach((v) => {
            arr.push(v.member_id)
          })
        }
      })
      // 获取去重后数组的member_id集合，并带入参数[]进行查询
      const uniqueArr = arr.filter((item, index) => arr.indexOf(item) === index)
      this.query.not_in = uniqueArr
      list(this.query)
        .then((res) => {
          if (res.code === 200) {
            this.fansData = res.data.list
            this.count = res.data.count
            // 勾选已选择的用户,只对当前列生效
            this.$nextTick(() => {
              this.toggleSelection()
            })
          }
        })
        .catch(() => {})
    },
    // 数组去重
    removal(arr, key) {
      for (var i = 0; i < arr.length - 1; i++) {
        for (var j = i + 1; j < arr.length; j++) {
          if (arr[i][key] == arr[j][key]) {
            arr.splice(j, 1)
            //因为数组长度减小1，所以直接 j++ 会漏掉一个元素，所以要 j--
            j--
          }
        }
      }
      return arr
    },
    // 点击关联用户
    relation(index) {
      this.selectFansIndex = index
      this.search_value = ''
      this.queryField = 'nickname'
      this.query = {
        nickname: '',
        member_id: '',
        wechat_id: '',
        status: 1,
        page: 1,
        limit: 10,
        not_in: []
      }
      this.query.wechat_id = this.colContent.wechat_id
      this.multipleSelection = this.form.discountList[index].user_ids
      this.getUsers()
      this.userIdsVisible = true
    },
    handleAddTask() {
      addTask({
        content_id: this.colContent.content_id
      })
        .then((res) => {
          ElMessage.success(res.msg)
          this.handleRefreshTask()
        })
        .catch(() => {})
    },
    async handleRefreshTask() {
      const result = await getTask({
        content_id: this.colContent.content_id
      })
      if (result.code == 200) {
        this.taskObject = result.data
        uni.showToast({
          title: '刷新成功!',
          icon: 'none'
        })
      }
    },
    // 推送通知
    handleTask(e) {
      this.colContent = e
      getTask({
        content_id: e.content_id
      })
        .then((res) => {
          if (res.code === 200) {
            this.taskObject = res.data
            this.taskVisible = true
          }
        })
        .catch(() => {})
    },
    // 查看方案详情
    viewDetails(e) {
      this.colContent = e
      this.viewDrawer = true
    }
  }
}
</script>
<style>
.el-tabs__nav-wrap::after {
  display: none;
}
</style>
<style lang="scss" scoped>
.mobile-width {
  min-height: 996px;
  margin: 0 auto;
  padding: 102px 25px 159px 23px;
  width: 460px;
  background: url('https://liaoma-test.oss-cn-shenzhen.aliyuncs.com/liaoma/admin/assets/images/bg/bgiphone.png') no-repeat;
  transition: all 0.5s ease 0s;
}
.operation-button {
  margin-left: 6px;
  width: 48px;
}
.text-center {
  font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
  font-weight: 500;
  font-size: 14px;
  color: #ffffff;
  line-height: 20px;
  padding: 0;
  width: 22px;
  height: 22px;
  margin: 4px 0;
}
.primary{
  background: #EBF6F9;
  color: #005266;
}
.tagColor {
  background: #edf8ff;
  color: #3ea5e9;
}
.elTable {
  ::v-deep .el-table {
    height: 100px !important;
  }
}
.detection-box .item {
  opacity: 1;
  animation: fadeIn 1s ease-in-out forwards;
  margin-bottom: 5px;
}
.detection-box .item .op {
  opacity: 0;
  animation: fadeInOp 1s ease-in-out forwards;
}

@keyframes fadeIn {
  from {
    color: #222222;
  }

  to {
    color: #005266;
  }
}
@keyframes fadeInOp {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}
</style>
